<template>
    <div class="page-header">
        <el-button type="primary" @click="router.push({path:'/main/comment/edit'})">
            <el-icon><Plus /></el-icon>
            添加评论
        </el-button>
        <el-button type="danger" @click="batchDelete" :disabled="selectedIds.length === 0">
            <el-icon><Delete /></el-icon>
            批量删除
        </el-button>
        <el-button @click="get_comment_list">
            <el-icon><Refresh /></el-icon>
            刷新
        </el-button>
    </div>

    <div class="search-bar">
        <el-form :inline="true">

            <el-form-item label="名称">
                <el-input v-model="filter.name" placeholder="名称" />
            </el-form-item>
            <el-form-item label="价格">
                <el-input v-model="filter.price" placeholder="价格" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="do_search">搜索</el-button>
            </el-form-item>
        </el-form>
    </div>

    <el-table :data="commentList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />

        <el-table-column prop="name" label="商品名称">
            <template #default="scope">

                <img :src="scope.row.goods_image" alt="">
                <span>{{ scope.row.goods_name }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="author" label="作者"></el-table-column>
        <el-table-column prop="score" label="评分"></el-table-column>
        <el-table-column prop="status" label="状态">
            <template #default="scope">
                <span v-if="scope.row.status==0">隐藏</span>
                <span v-if="scope.row.status==1">显示</span>
            </template>
        </el-table-column>
        <el-table-column prop="date" label="日期"></el-table-column>
        <el-table-column prop="" label="操作" width="200">
            <template #default="scope">
                <el-button type="primary" size="small" @click="router.push({path:'/main/comment/edit/' + scope.row.id})">
                    <el-icon><Edit /></el-icon>
                    编辑
                </el-button>
                <el-button type="danger" size="small" @click="deleteComment(scope.row.id)">
                    <el-icon><Delete /></el-icon>
                    删除
                </el-button>
            </template>

        </el-table-column>
</el-table>
</template>

<script lang="ts" setup >

import { ref } from "vue";
import axios from "axios";
import { useRouter } from 'vue-router';
import { Plus, Refresh, Delete, Edit } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';

const router = useRouter();


const total = ref<number>(10)
const per_page = ref<number>(15)
const current_page = ref<number>(1)

const commentList = ref<any[]>([]);
const selectedIds = ref<number[]>([]);
const filter:any = ref<object>({

    name: '',
    status: '',
    price: '',
    category_name: '',
    brand_name: '',
});

const get_comment_list = () => {
    var url = window.VITE_URL + '/admin.goodsComment/get_list';

    if (filter.value.name) {
        url += '&name=' + filter.value.name;
    }
    if (filter.value.status != '') {
        url += '&status=' + filter.value.status;
    }
    if (filter.value.price) {
        url += '&price=' + filter.value.price;
    }
    if (filter.value.category_name) {
        url += '&category_name=' + filter.value.category_name;
    }

    if (filter.value.brand_name) {
        url += '&brand_name=' + filter.value.brand_name;
    }

    axios.get(url).then(function (res) {

        commentList.value = res.data;

    });
}

get_comment_list();

const do_search = () => {
    get_comment_list();
}

// 处理选择变化
const handleSelectionChange = (selection: any[]) => {
    selectedIds.value = selection.map(item => item.id);
}

// 删除单个评论
const deleteComment = (id: number) => {
    ElMessageBox.confirm(
        '确定要删除该评论吗？',
        '删除确认',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        performDelete([id]);
    }).catch(() => {
        // 取消删除
    });
}

// 批量删除
const batchDelete = () => {
    if (selectedIds.value.length === 0) {
        ElMessage.warning('请选择要删除的评论');
        return;
    }

    ElMessageBox.confirm(
        `确定要删除选中的 ${selectedIds.value.length} 条评论吗？`,
        '批量删除确认',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        performDelete(selectedIds.value);
    }).catch(() => {
        // 取消删除
    });
}

// 执行删除操作
const performDelete = (ids: number[]) => {
    const url = window.VITE_URL + '/admin.goodsComment/remove';
    const data = { ids: ids };

    axios.post(url, data).then((res: any) => {
        if (res.data.status === 0) {
            ElMessage.success(res.data.msg || '删除成功');
            selectedIds.value = [];
            get_comment_list();
        } else {
            ElMessage.error(res.data.msg || '删除失败');
        }
    }).catch((error) => {
        ElMessage.error('删除失败，请重试');
    });
}
</script>

<style scoped>
.page-header {
    margin-bottom: 20px;
}

.search-bar {
    margin-bottom: 20px;
}
</style>